<script lang="ts" setup>
import { ref, nextTick } from "vue";
import CardLight from "./CardLight/index.vue";

const time = ref("");
const bpmValue = ref(60);

const random = () => {
  bpmValue.value = Math.floor(Math.random() * 601);
};

const beatCount = ref(1);
const timeValue = ref(4);

const isPlaying = ref(false); // 新增：用于判断当前是否正在播放
const timeVisible = ref(false);

const timePopupClick = () => {
  isPlaying.value = false;
  nextTick(() => (timeVisible.value = true));
};

// 定义选项类型
interface numberString {
  [key: number]: string;
}

const beatCountOptions:numberString = {
  0: "1",
  1: "2",
  2: "3",
  3: "4",
  4: "5",
  5: "6",
  6: "7",
  7: "8",
  8: "9",
  9: "10",
};

const timeValueOptions:numberString = {
  0: "2",
  1: "4",
  2: "8",
  3: "16",
};

const beatCountOnChange = (e: number) => {
  beatCount.value = beatCountOptions[e] as any;
};

const timeValueOnChange = (e: number) => {
  timeValue.value = timeValueOptions[e] as any;
};

const startBtn = () => {
  isPlaying.value = true;
  // 执行播放相关的逻辑
};

const stopBtn = () => {
  isPlaying.value = false;
  // 执行暂停相关的逻辑
};

</script>

<template>
  <div id="content">
    <t-row gutter="16">
      <t-col span="8">
        <t-button size="large" theme="light" @click="timePopupClick">{{
          beatCount + "/" + timeValue + "拍"
        }}</t-button>
      </t-col>
      <t-col span="8">
        <div style="position: relative; width: 100%">
          <div
            style="
              position: absolute;
              transform: translate(-50%, -50%);
              left: 50%;
            "
          >
            <t-tag variant="light" theme="success">BPM</t-tag>
          </div>
        </div>
        <div style="height: 100%; display: flex">
          <t-stepper
            style="font-size: 20px; margin: auto; font-weight: bolder"
            v-model:value="bpmValue"
            :integer="true"
            :max="600"
          />
        </div>
      </t-col>
      <t-col span="8">
        <div style="display: flex">
          <t-button
            style="margin-left: auto"
            size="large"
            theme="light"
            @click="random"
            >随机</t-button
          >
        </div>
      </t-col>
    </t-row>
    <div style="margin-top: 20px">
      <t-slider v-model="bpmValue" :max="600" />
    </div>

    <!-- <div style="margin-top: 20px">
      <div style="width: 100%; height: 100px; display: flex">
        <div style="margin: auto">
          <t-count-down
            :autoStart="false"
            :format="'mm:ss:SS'"
            size="large"
            :time="time"
            millisecond
          />
        </div>
      </div>
    </div> -->
    <!-- <div style="margin-top: 20px">
      <t-button theme="light" @click="random">播放</t-button>
    </div> -->
    <div style="margin-top: 20px">
      <CardLight
        :start="isPlaying"
        v-model:beatCount="beatCount"
        v-model:bpm="bpmValue"
      />
    </div>
    <div style="margin-top: 200px">
      <div style="display: flex;width: 100%">
        <t-button style="margin: auto" size="large" theme="light" @click="isPlaying ? stopBtn() : startBtn()">
          {{ isPlaying ? '暂停' : '播放' }}
        </t-button>
      </div>
    </div>
    <t-popup v-model="timeVisible" :placement="'bottom'" destroy-on-close>
      <div style="height: 50px; width: 100%"></div>
      <div style="width: 100%">
        <t-slider
          :default-value="1"
          :marks="beatCountOptions"
          :step="1"
          theme="capsule"
          :max="9"
          :on-change="beatCountOnChange"
        />
        <t-slider
          :default-value="1"
          :marks="timeValueOptions"
          :step="1"
          theme="capsule"
          :max="3"
          :on-change="timeValueOnChange"
        />
      </div>
    </t-popup>
  </div>
</template>

<style lang="less" scoped>
#content {
  padding: 10px;
}
</style>
